<template>
	<view class="box">
		<u-navbar title="我的藏品列表" :safeAreaInsetTop="true" :placeholder="true" :autoBack="true" leftIconColor="#fff"
			titleStyle="color:#fff" bgColor="#262241" :rightText="delisting?'':'批量出售'" @rightClick="goPageDetail"></u-navbar>
		<view class=" flex_ld_a" v-if="!delisting">
			<text class="f24 c4">挂单时间:{{Hallconfig.hatch_goods_sell_start_time*1000 | date('hh:MM')}} ~ {{Hallconfig.hatch_goods_sell_end_time*1000 | date('hh:MM')}}</text>
			<text class="f24 c4">交易时间:{{Hallconfig.hatch_goods_buy_start_time*1000 | date('hh:MM')}} ~ {{Hallconfig.hatch_goods_buy_end_time*1000 | date('hh:MM')}}</text>
		</view>
		<view class="obj_list">
			<view class="obj_list_item" v-for="item in goodlist" :key="item.id">
				<image class="obj_list_item_bg" :src="item.good.goods_image" mode="aspectFill"
					@click="godetail(item.id,item.status)"></image>
				<view class="obj_list_item_name">
					{{item.goods_name}}
				</view>
				<view class="obj_list_item_num">
					藏品编号：{{item.goods_number}}/{{item.good.circulation}}
				</view>
				<view class="obj_list_item_price">
					<view class="obj_list_item_price_tag" >
						买入价
					</view>
					<!-- <view class="obj_list_item_price_tag" v-show="selval=='仅售卖'">
						卖出价
					</view> -->
					<text>
						<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" src="../../static/icon/money.png"
							mode=""></image>{{item.price}}
					</text>
				</view>
				<view class="hoarding flex_dq" :class="item.prevent_hoarding_price>item.transaction_price?'':'reds'" v-if="item.prevent_hoarding_price">
					<text>防囤价:</text>
					<text>{{item.prevent_hoarding_price}}</text>
				</view>
				<view class="tag" v-if="item.status_desc">
					{{item.status_desc}}
				</view>
				<view class="btnwrap">
					<view class="btn" style="margin-left: 20rpx;" v-show="item.equity_type==3&&item.status==0"
						@click="godetail(item.id,item.status)">
						寄售
					</view>
					<view class="btn" style="margin-left: 30rpx;" v-show="item.equity_type==3&&item.status==0"
						@click="getitem(item)">
						去挖宝
					</view>
					<view class="btn2" v-show="item.status==5" @click="tipShow=true,objitem=item">
						取消挖宝
					</view>
				</view>
			</view>
			<view class="obj_list_item" v-if="selnum=='2'" v-for="item in goodlist2" :key="item.id">
				<image class="obj_list_item_bg" :src="item.production_image" mode=""></image>
				<view class="obj_list_item_name">
					{{item.production_name}}
				</view>
				<view class="obj_list_item_num">
					<!-- 藏品编号：{{item.goods_number}}/{{item.good.circulation}} -->
				</view>
				<view class="obj_list_item_price">
					<view class="obj_list_item_price_tag">
						卖出价
					</view>
					<text>
						<image style="width: 28rpx;height: 28rpx;margin-right: 6rpx;" src="../../static/icon/money.png"
							mode=""></image>{{item.output_recovery.price}}
					</text>
				</view>
				<!-- 	<view class="tag" >
					{{item.status_desc}}
				</view> -->
				<view class="btn" v-if="item.is_sell" @click="sure(item)">
					回收
				</view>
			</view>

		</view>
		<noDatas :xxxList="goodlist" :status="status"></noDatas>

		<u-popup :show="showsell" mode="center" @close="showsell=false" closeable bgColor="transparent">
			<view class="zz_wrap">
				<view class="tit">
					确认回收
				</view>
				<view class="price">
					<image src="../../static/icon/money.png" mode=""></image>{{itemobj.output_recovery.price}}
				</view>
				<view class="text">
					当前出售价格
				</view>
				<view class="btn_wrap">
					<view class="btn_one" @click="showsell=false">
						取消
					</view>
					<view class="btn_two" @click="showsell=false,showpass=true">
						确认出售
					</view>
				</view>
				<view class="tip">
					<view class="tip_tit">
						温馨提示
					</view>
					<view class="content">
						当前物品价格具有周期波动性，平台不支持补差价，请谨慎考虑是否售卖。
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showpass" mode="center" @close="delother,showpass=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#555275" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="showpass=false,password=''">
						取消
					</view>
					<view class="other_btn2" @click="getsell">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showDig" @close="showDig = false" closeable bgColor="transparent">
			<view class="dig_box  flex_Z">
				<view class="empty"></view>
				<view class="dig_list  flex_ld">
					<text>藏品名称</text>
					<text class="c0 f28">{{objitem.goods_name}}</text>
				</view>
				<view class="dig_list  flex_ld">
					<text>藏品编号</text>
					<text class="c2 f40">{{objitem.goods_number}}/{{objitem.good.circulation}}</text>
				</view>
				<!-- 		<view class="dig_list flex_ld">
					<text>消耗数量</text>
					<u-number-box  integer button-size="36" color="#ffffff" bgColor="#4e4791" iconStyle="color: #ffffff" v-model.trim="numbers"></u-number-box>
				</view> -->
				<view class="dig_list  flex_ld">
					<text>收益预览</text>
					<text class="c2 f32">1天产出1个</text>
				</view>
				<view class="virtual_props flex_dq">
					<view class="virtual_box ">
						<image src="../../static/icon/fhtb.png" mode="aspectFill"></image>
						<text class="f22 c0">福合通宝</text>
					</view>
				</view>
				<view class="empty"></view>
				<view class="navigation flex_c" @click="changestatus()">
					<text>确认</text>
					<image src="../../static/image/mask.png" mode="aspectFill"></image>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定要取消挖宝吗</text>

				<view class="prompt_ntm" @click="changestatus()">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<view style="width: 750rpx;height: 40rpx;">
		</view>
	</view>

</template>

<script>
	import {goodsList,jinshoumai,sell,updateStatus} from "../../api/object.js";
	import {resaleConfig} from "../../api/store.js";
	export default {
		data() {
			return {
				goodlist: [],
				page: 1,
				size: 20,
				selnum: "",
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				page2: 1,
				size2: 20,
				goodlist2: [],
				Hallconfig:{}, //配置信息
				status2: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				showsell: false,
				itemobj: {
					output_recovery: {
						price: "200.00"
					}

				},
				pid: '',
				showpass: false,
				password: "",
				statusval: "",
				showDig: false,
				objitem: {
					good: {
						circulation: "100"
					}
				},
				tipShow: false,
				delisting:0,
				itemid: "",
				total1: "",
				total2: ""
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			// this.getgoodlist()
			this.isResaleConfig()
		},
		onShow() {
			this.getgoodlist()
		},
		methods: {
			// 配置信息
			isResaleConfig() {
				resaleConfig().then(res => {
					console.log(res)
					const timestamp = Math.round(new Date().getTime() / 1000);
					console.log(timestamp);
					console.log(res.data.hatch_goods_sell_start_time);
					this.startTime = timestamp  > res.data.hatch_goods_sell_start_time
					this.endTime = timestamp  < res.data.hatch_goods_sell_end_time
					console.log(this.startTime);
					console.log(this.endTime);
					
					this.Hallconfig = res.data
					this.handlingFees = res.data.hatch_transaction_fees * 0.01
				})
			},
			getitem(item) {

				this.showDig = true
				this.objitem = item
				console.log(this.objitem)
			},
			changestatus() {
				let that = this
				if (that.objitem.status == 0) {
					that.statusval = 1
				}
				if (that.objitem.status == 5) {
					that.statusval = 0
				}
				updateStatus({
					id: that.objitem.id,
					status: that.statusval
				}).then(res => {
					if (res.code == 1) {
						that.showDig = false
						that.tipShow = false
						that.page=1
						that.goodlist=[]
						that.getgoodlist()
					}
					uni.$u.toast(res.msg)
					console.log(res)
				})
				console.log(status)

			},
			// clickToggleHandle(ele) {
			// 	this.toggleList.forEach(item => item.select = false)
			// 	// this.currLabel = ele.label
			// 	ele.select = true
			// 	this.selval = ele.label
			// 	this.selnum = ele.selnum
			// 	console.log(ele, "选择")
			// 	if (this.selval == "仅售卖") {
			// 		this.getjinshoumai()
			// 	}
			// 	if (this.selval == "全部" || this.selval == '挖宝中' || this.selval == "待挖宝") {
			// 		this.getgoodlist()
			// 		this.getgoodlist1()
			// 		this.getgoodlist2()
			// 	}

			// 	console.log(ele)
			// },
			godetail(id, status) {
				uni.navigateTo({
					url: `/pagesMy/mycollection/collectionlist?id=${id}`
				})
				// if (status == 0) {
				// 	console.log(id)
				// 	uni.navigateTo({
				// 		url: `/pagesMy/mycollection/collectionlist?id=${id}`
				// 	})
				// }

			},
			// 批量出售
			goPageDetail() {
				if(!this.delisting){
					uni.navigateTo({
						url: '/pagesMy/mallCenter/bulkSales?id=' + this.pid
					})
				}
			},
			getsell() {
				sell({
					id: this.itemobj.id,
					password: this.password
				}).then(res => {
					console.log(res, "回收")
					if (res.code == 1) {
						this.showpass = false
						this.getjinshoumai()
					}
					uni.$u.toast(res.msg)
				})
			},
			sure(item) {
				this.itemobj = item
				this.showsell = true
				console.log(this.itemobj)
			},
			getjinshoumai() {
				jinshoumai({
					page: this.page2
				}).then(res => {
					console.log(res, "仅售卖")
					if (res.code == 1) {

						let list = res.data.data;
						this.goodlist2 = this.page2 == 1 ? list : this.goodlist2.concat(list);
						console.log(this.goodlist2);
						if (list.length < this.size2) this.status2 = 'nomore';
						else this.status2 = 'loading';
					}
				})
			},
			getgoodlist() {
				goodsList({
					page: this.page,
					goods_id: this.id
					// status: this.selnum
				}).then(res => {
					console.log(res, "1111111")
					if (res.code == 1) {
						this.delisting = res.data.data[0].is_delisting
						let list = res.data.data;
						this.pid = res.data.data[0].hatch_goods_pid
						this.goodlist = this.page == 1 ? list : this.goodlist.concat(list);
						console.log(this.goodlist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			getgoodlist1() {
				goodsList({
					page: this.page,
					status: "0"
				}).then(res => {
					console.log(res, "全部及黛瓦煲")
					if (res.code == 1) {
						this.total1 = res.data.total
					}
				})
			},
			getgoodlist2() {
				goodsList({
					page: this.page,
					status: "1"
				}).then(res => {
					console.log(res, "全部及黛瓦煲")
					if (res.code == 1) {
						this.total2 = res.data.total
					}
				})
			},
		},
		onReachBottom() {
			if (this.selnum == "2") {
				if (this.status2 != 'nomore') {
					this.page2 = this.page2 + 1
					this.getjinshoumai()
				}
			} else {
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.getgoodlist()
				}
			}

		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			if (this.selnum == "2") {
				setTimeout(function() {
					that.page2 = 1,
						that.getjinshoumai()
				}, 800);
			} else {
				setTimeout(function() {
					that.page = 1,
						that.getgoodlist()
				}, 800);
			}

		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		// height: 100vh;
		background-color: #262241;
		position: relative;
	}
	.time_tips{
		width: 94%;
		// height: 100rpx;
		// background: pink;
		margin: 20rpx auto 0;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #262241;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;
		// top: 100rpx;
		z-index: 999;

		.tab-list-item {
			position: relative;
			// width: 180rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 400;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.obj_list {
		margin-top: 30rpx;
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.obj_list_item {
			width: 330rpx;
			// height: 544rpx;
			background: #3C2F65;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx;
			position: relative;

			.obj_list_item_bg {
				width: 330rpx;
				height: 312rpx;
				display: block;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.obj_list_item_num {
				width: 312rpx;
				margin-top: 22rpx;
				margin-left: 18rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #fff;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
			}

			.obj_list_item_name {
				width: 312rpx;
				margin-top: 30rpx;
				margin-left: 18rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 超出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}

			.obj_list_item_from {
				width: 312rpx;
				margin-top: 20rpx;
				margin-left: 18rpx;

				display: flex;
				align-items: center;
				/* 显示省略号 */

				>image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}

				.obj_list_item_from_name {
					width: 264rpx;
					white-space: nowrap;
					/* 不换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					font-size: 24rpx;
					color: #FFFFFF;
				}

			}

			.obj_list_item_price {
				width: 312rpx;
				height: 50rpx;
				margin-left: 18rpx;
				margin-top: 22rpx;
				padding-bottom: 22rpx;
				display: flex;
				align-items: center;
				// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

				.obj_list_item_price_tag {
					width: 100rpx;
					height: 36rpx;
					background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: center;
					margin-right: 10rpx;
				}

				>text {
					// font-family: youshe;
					font-weight: 700;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.btnwrap {
				display: flex;
				width: 330rpx;
				justify-content: flex-start;

				.btn {
					// margin-left: 172rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					width: 136rpx;
					height: 52rpx;
					background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.btn_none {
					// margin-left: 172rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					width: 136rpx;
					height: 52rpx;
					// background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.btn2 {
					margin-left: 172rpx;
					margin-top: 20rpx;
					width: 136rpx;
					height: 52rpx;
					margin-bottom: 20rpx;
					background: #53418B;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.btn3 {
					// margin-left: 172rpx;	
					margin-top: 20rpx;
					width: 136rpx;
					height: 52rpx;
					margin-bottom: 20rpx;
					background: #53418B;
					border-radius: 48rpx 48rpx 48rpx 48rpx;
					text-align: center;
					line-height: 52rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.tag {
				width: 100rpx;
				height: 44rpx;
				background: rgba(0, 0, 0, 0.8);
				border-radius: 25rpx;
				position: absolute;
				top: 14rpx;
				right: 14rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 44rpx;
			}
		}
	}

	.zz_wrap {
		width: 602rpx;
		height: 628rpx;
		background: #2A2753;
		border-radius: 22rpx 22rpx 22rpx 22rpx;

		.tit {
			width: 602rpx;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			padding-top: 50rpx;
		}

		.price {
			width: 602rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;

			>image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}

			font-weight: 500;
			font-size: 72rpx;
			color: #FFFFFF;

		}

		.text {
			width: 602rpx;
			text-align: center;
			font-weight: 300;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-top: 20rpx;
		}

		.btn_wrap {
			width: 602rpx;
			height: 72rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 60rpx;

			.btn_one {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.3);
				font-weight: 400;
				font-size: 28rpx;
				color: #A6A5AF;
				text-align: center;
				line-height: 72rpx;
			}

			.btn_two {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				text-align: center;
				line-height: 72rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.tip {
			margin: 0 auto;
			margin-top: 60rpx;
			width: 472rpx;

			.tip_tit {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.content {
				font-weight: 400;
				font-size: 26rpx;
				color: #A7A4AD;
			}
		}
	}

	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #2A2753;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;

		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #FFFFFF;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}

		.code_input {
			margin: 0 auto;
		}

		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;

			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.3);
				font-size: 28rpx;
				color: #A6A5AF;
				text-align: center;
				line-height: 72rpx;
			}

			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}

		.u-code-input {
			margin-left: 50rpx;
		}

		.uni-input-input {
			margin-left: 50rpx;

			font-size: 32rpx;
			opacity: 1 !important;
		}

		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}

	.dig_box {
		width: 100%;
		/* height: 800rpx; */
		background: #2A2753;
		border-radius: 40rpx 40rpx 0 0;
		padding-top: 20rpx;
	}

	.dig_list {
		width: 100%;
		padding: 0 30rpx;
		margin-top: 48rpx;
	}

	.dig_list>text:nth-child(1) {
		color: #ffffff;
		font-size: 30rpx;
	}

	.virtual_props {
		width: 100%;
		margin: 30rpx;
	}

	.virtual_box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 168rpx;
		height: 168rpx;
		background: #353267;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	.virtual_box>image {
		width: 68rpx;
		height: 72rpx;
		margin-bottom: 20rpx;
	}

	.navigation {
		position: relative;
		width: 692rpx;
		height: 86rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
		margin: 0 auto;
	}

	.navigation>text {
		font-size: 34rpx;
		font-family: iconfont;
		color: #ffffff;
		font-weight: 700;
	}

	.navigation>image {
		position: absolute;
		top: 0;
		left: 22%;
		width: 110rpx;
		height: 80rpx;
	}

	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #A6A5AF;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
	}
	.hoarding{
		font-size: 24rpx;
		color: #e6e6e6;
		padding: 0 20rpx 20rpx;
	}
	.reds{
		color: #fa3534 !important;
	}

	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
	}
</style>